<template>
  <div id="SearchInput">
    <div class="search-box">
      <el-popover
        placement="bottom-start"
        trigger="click"
        :visible="popperVis"
        popper-class="popoverStyle"
      >
        <template #reference>
          <el-input
            @input="handleIptChange"
            size="large"
            clearable
            :prefix-icon="Search"
            v-model="searchvalue"
            style="width: 100%"
            placeholder="请输入内容"
          >
            <template #append>
              <el-button size="large">搜索</el-button>
            </template>
          </el-input>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue';
import bus from '@/utils/bus';
import { ref } from 'vue';
const popperVis = ref(false);
const searchvalue = ref('');
const handleIptChange = (val) => {
  let text;
  //初始化正则表达式,加上括号(),形成可捕获元组
  var reg = new RegExp('(' + val + ')', 'g');
  //高亮要查找的字符串
  if (val) {
    text = val.replace(reg, "<span style='color: red;'>$1</span>");
  } else {
    text = val;
  }
  bus.emit('handleHighlight', text);
};
</script>

<style scope lang="scss">
#SearchInput {
  margin-top: 20px;
}
.el-input-group__append {
  width: 70px;
  background: var(--background-color) !important;
  color: #fff;
}
</style>
<style lang="scss">
.el-popover.popoverStyle {
  padding: 0 0 !important;
  // left: 350px !important;
}
</style>
